<template>
    <div class="container">
        <div class="handle-box">
            <span style="padding: 8px">名称：</span>
            <el-input v-model="query.title" placeholder="标签名称" class="handle-input mr10" style="width: 20%"></el-input>
            <span style="padding: 8px"></span>
            <el-button type="success" size="medium" icon="el-icon-search" @click="initAjaxMethod">搜索</el-button>
            <!-- <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
        </div>
        <div class="roleInput">
            <!-- <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">新建一级类目</el-button> -->
             <el-button type="primary" size="medium" @click="handleAdd" v-if="roulShowList.btn1.type">添加</el-button>
        </div>
        <div>
            <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                border
                :default-expand-all="false"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
                <el-table-column prop="id" label="" width="80" align="left">
                    <template slot-scope="scope">
                        {{ scope.row ? '' : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="分类名称" align="center"></el-table-column>
                <el-table-column prop="description3" label="一级标题" align="center"></el-table-column>
                <el-table-column prop="description" label="二级标题" align="center"></el-table-column>
                <el-table-column prop="description2" label="三级标题" align="center"></el-table-column>
                <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                <!-- <el-table-column prop="childrenNum" label="二级数量" align="center">
                    <template slot-scope="scope" width="80">
                        <span>{{ scope.row.childrenNum }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="create_time" label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time || formDate }}</span>
                    </template>
                </el-table-column> -->
                  <el-table-column prop="status" label="推荐到首页" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.ishot == 1" type="success">是</el-tag>
                        <el-tag v-if="scope.row.ishot == 0" type="info">否</el-tag>
                    </template>
                </el-table-column>

                <!-- <el-table-column prop="status" label="是否开启" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1" type="success">是</el-tag>
                        <el-tag v-if="scope.row.status == 0" type="info">否</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" align="center" width="420">
                    <template slot-scope="scope">
                        <!-- <el-button
                            icon="el-icon-plus"
                            v-if="scope.row.level == 0 && roulShowList.btn1.type"
                            type="text"
                            @click="handleSecond(scope.row)"
                            >添加二级类目</el-button
                        >
                        <span style="padding: 8px"></span> -->
                        <el-button v-if="roulShowList.btn3.type" icon="el-icon-edit" type="text" @click="handleEdit(scope.row)"
                            >编辑</el-button
                        >
                        <!-- <span style="padding: 8px"></span>
                        <el-switch
                            v-if="roulShowList.btn4.type"
                            v-model="scope.row.status == 1 ? true : false"
                            active-color="#13ce66"
                            inactive-color="#eeeeee"
                            active-text="启用"
                            inactive-text="停用"
                            @change="updatesw(scope.row, 1)"
                        >
                        </el-switch> -->
                        <span style="padding: 8px"></span>
                        <!-- <span v-if="roulShowList.btn2.type">
                            <el-popconfirm title="确定删除吗22？" @confirm="handleDelete(scope.row)">
                                <el-button type="text" slot="reference" icon="el-icon-delete" style="color: #f56c6c">删除2</el-button>
                            </el-popconfirm>
                        </span> -->
 

                         <!-- <el-button @click="handleDelete(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     class="red">删除</el-button> -->


                      <!-- <el-popconfirm  title="确定删除吗？" @confirm="handleDelete(scope.row.id, scope.row.title)">
                           <el-button type="text" slot="reference" >删除</el-button>
                         </el-popconfirm> -->

                         
          <el-button @click="handleDelete(scope.row)"
                     type="text"
                     size="small"
                     icon="el-icon-delete"
                     class="red">删除</el-button>


                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    layout="sizes,total, prev, pager, next, jumper"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :page-sizes="[10, 20, 50, 100, 150, 200]"
                    @size-change="handleSizeChange"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!--添加组织名称-->
        <el-dialog :title="rbacTitle" :visible.sync="editVisible" width="50%">
            <div class="list-group">
                <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <!-- <div class="list-title"><span class="mast-icon">*</span>{{ level == 0 ? '一级' : '二级' }}分类名称:</div> -->
                             <div class="list-title"><span class="mast-icon">*</span>分类名称:</div>
                        </el-col>
                        <el-col :span="18">
                            <el-input v-model="title" placeholder="请填写名称" maxlength="5" show-word-limit></el-input>
                        </el-col>
                    </el-row>
                </div>
 
                 <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">                          
                             <div class="list-title"><span class="mast-icon">*</span>一级标题:</div>
                        </el-col>
                        <el-col :span="18">
                            <el-input v-model="description3" placeholder="请填写" maxlength="100" show-word-limit></el-input>
                        </el-col>
                    </el-row>
                </div>
                


                <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">                          
                             <div class="list-title"><span class="mast-icon">*</span>二级标题:</div>
                        </el-col>
                        <el-col :span="18">
                            <el-input v-model="description" placeholder="请填写" maxlength="100" show-word-limit></el-input>
                        </el-col>
                    </el-row>
                </div>
                
                  <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">                          
                             <div class="list-title"><span class="mast-icon">*</span>三级标题:</div>
                        </el-col>
                        <el-col :span="18">
                            <el-input v-model="description2" placeholder="请填写" maxlength="100" show-word-limit></el-input>
                        </el-col>
                    </el-row>
                </div>
                

                 <!-- v-if="level != 0" -->
                <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="list-title">封面:</div>
                        </el-col>
                        <el-col :span="18">
                            <img-upload :img-url.sync="img_url"></img-upload>
                            <p style="color: red">图片规格：750*340，大小300kb以内(格式：jpg,jpeg,png,gif,bmp)</p>
                        </el-col>
                    </el-row>
                </div>
                <div style="padding: 10px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="list-title">排序:</div>
                        </el-col>
                        <el-col :span="18">
                            <el-input-number v-model="sort" controls-position="right" :min="0" :max="10"></el-input-number>
                        </el-col>
                    </el-row>
                </div>

                   <div style="padding: 10px">

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="list-title">是否热门:</div>
                        </el-col>
                        <el-col :span="18">
                           <el-radio-group v-model="ishot">
                               <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                       
                            </el-radio-group>
                        </el-col>
                    </el-row>
 

                </div>
              

                

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="editVisible = false">取 消</el-button>
                <el-button size="medium" type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/index';
import imgUpload from '../../commons/ImgUpload';
import { getdate } from '@/utils/utils';
import _ from 'lodash';
import axios from "axios";
export default {
    components: { imgUpload },
    data() {
        return {
            rbacTitle: '',
            editOrAdd: 1,
            editVisible: false,
            tableData: [],
            cascaderData: [],
            options: [],
            description3: '',
            description: '',
            description2: '',
            parent_id: 0,
            title: '',
            img_url: '',
            sort: 0,
            ishot: 0,
            id: null,
            query: {
                pageIndex: 1,
                pageSize: 10,
                title: ''
            },
            pageTotal: 0,
            level: 0,
            roulShowList: {
                btn1: { rule: 'tagmanage,main,add', type: true, name: '新增' },
                btn2: { rule: 'tagmanage,main,del', type: true, name: '删除' },
                btn3: { rule: 'tagmanage,main,edit', type: true, name: '编辑' },
                btn4: { rule: 'tagmanage,main,edit_disabled', type: true, name: '禁用' },
                btn5: { rule: 'tagmanage,main,edit_warn', type: true, name: '告警' }
            }
        };
    },
    filters: {
        formDate(val) {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {
        this.initAjaxMethod();
        // this.roleMethod()
    },
    methods: {
        reset() {
            this.query.pageIndex = 1;
            this.query.title = '';
            this.initAjaxMethod();
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSizeChange(e) {
            this.query.pageSize = e;
            this.initAjaxMethod();
        },
        //初始化页面列表
        initAjaxMethod() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.goodscate_INDEX, {
                    page: this.query.pageIndex,
                    listRows: this.query.pageSize,
                    title: this.query.title
                })
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        let list = Array.isArray(res.data.data) ? res.data.data : [];
                        list.forEach((item) => {
                            item.childrenNum = 0;
                            if (Array.isArray(item.children) && item.children.length > 0) {
                                item.childrenNum = item.children.length;
                            }
                        });
                        this.tableData = list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //新增
        handleAdd() {
            this.editVisible = true;
            this.editOrAdd = 1;
            this.parent_id = 0;
            this.title = '';
             this.description3 = '';   
            this.description = '';  
            this.description2 = '';  
            this.img_url = '';
            this.sort = 0;
            this.id = null;
            this.rbacTitle = '新增标签';
            this.level = 0;
        },
        //点击编辑
        handleEdit(data) {
            console.log(data);
            this.editVisible = true;
            this.editOrAdd = 2;
            this.id = data.id;
            this.parent_id = data.parent_id;
            this.title = data.title;
            this.sort = data.sort;
            this.ishot = data.ishot;
            this.img_url = data.img_url;
            this.rbacTitle = data.level == 0 ? '编辑标签' : '编辑二级标签';
            this.level = data.level;
             
            this.description3 = data.description3;
            this.description = data.description;
            this.description2 = data.description2;
             
        },
        handleSecond(data) {
            this.editVisible = true;
            this.editOrAdd = 1;
            this.parent_id = data.id;
            this.title = '';
            this.img_url = '';
            this.sort = 0;
            this.id = null;
            this.rbacTitle = '新增二级标签';
            this.level = 1;
            this.description3 = data.description3;
            this.description = data.description;
            this.description2 = data.description2;
        },
        //弹出框确定
        saveEdit() {
            if (!this.title || this.title == '') {
                return this.$message.error('请填写分类名称!');
            }
            let parmam = {
                parent_id: this.parent_id,
                title: this.title,
                description3 :this.description3,
                description :this.description,
                description2 :this.description2,
                sort: this.sort,
                ishot: this.ishot,
                img_url: this.img_url,
                detail: '新增：' + this.title
            };
            let url = api.goodscate_ADD;
            if (this.editOrAdd == 2) {
                parmam.id = this.id;
                parmam.detail = '编辑：' + this.title;
                url = api.goodscate_EDIT;
            }
            const loading = this.$loading({ text: '保存中...' });
            this.$http
                .post(url, parmam)
                .then((res) => {
                    loading.close();
                    console.log('新增规则', res);
                    if (res.code == 1) {
                        this.$message.success('操作成功');
                        this.editVisible = false;
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        updatesw(data, flag) {
            let url = '',
                status = '',
                detail = '';
            if (flag == 1) {
                status = data.status == 0 ? 1 : 0;
                url = api.goods_cate_DISABLED;
                detail = '标签' + data.title + ':' + (data.status == 0 ? '启用' : '停用');
            } else if (flag == 2) {
                status = data.iswarn == 0 ? 1 : 0;
                url = this.$API.ARTICLE_TAG_WARN;
                detail = '标签' + data.title + ':' + (data.iswarn == 0 ? '警示' : '撤销警示');
            }
            const loading = this.$loading({ text: '保存中...' });
            this.$http
                .post(url, { id: data.id, status, detail })
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        this.$message.success('操作成功');
                        this.initAjaxMethod();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //点击删除
      
        //删除
        handleDelete(data){
        this.delAjaxMethod(data.id);
        },

     delAjaxMethod(ids){
      this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http.post(api.goodscate_DEL, {ids:ids})
              .then((res) => {
                loading.close();
                console.log('项目列表', res)
                if (res.code == 1) {
                  this.$message.success('删除成功');
                  this.query.pageIndex=1;
                  this.initAjaxMethod()
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
      })
    },

        roleMethod() {
            this.$http.post(this.$API.GET_TRR_PAGE, { rule: 'tagmanage,main' }).then((res) => {
                console.log('页面权限', res);
                if (res.data === 'admin') {
                    for (let i in this.roulShowList) {
                        this.roulShowList[i].type = true;
                    }
                } else {
                    res.data.forEach((item) => {
                        for (let j in this.roulShowList) {
                            if (item.rule == this.roulShowList[j].rule) {
                                this.roulShowList[j].type = true;
                            }
                        }
                    });
                }
            });
        }
    }
};
</script>


<style scoped>
.roleInput {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px 0;
}
.list-title {
    /* padding:7px; */
    height: 32px;
    display: flex;
    align-items: center;
}
</style>